<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>

</head>
<body>
<div id="app">
    <el-button type="text" @click="findById">查看角色</el-button>
    <!-- 表单模态框区域 -->
    <el-button type="text" @click="dialogFormVisible = true">添加用户</el-button>
    <el-dialog title="订单" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form :model="user">
            <el-form-item label="用户名">
                <el-input v-model="user.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名">
                <el-input v-model="user.realname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="user.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <el-input v-model="user.icon" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-input v-model="user.state" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="SaveUser">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="全部角色" :visible.sync="dialogRoleFormVisible">
        <el-tree
                :data="roles"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                :props="defaultProps"
                @check="checkUserRole"
                highlight-current>
        </el-tree>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="cancel()">确 定</el-button>
        </div>
    </el-dialog>
<!--    用户信息详情-->
    <el-table
            ref="multipleTable"
            @current-change="toggleSelection"
            :data="users"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="编号">
            <template slot-scope="scope">
                <sidpan style="margin-left: 10px">{{ scope.row.id }}</sidpan>
            </template>
        </el-table-column>
        <el-table-column
                label="用户名">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.username }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="真实姓名">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.realname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="手机">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="头像">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.icon }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.state }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</div>

</body>
<script>
    new Vue({
        el: "#app",
        data:{
            users:[],
            user:{id:0},
            dialogFormVisible:false,
            dialogRoleFormVisible:false,
            roles:[],
            currentRole:null,
            defaultProps: {
                label: 'name'
            }
        },
        methods:{
            loadAllUsers(){
                axios.get("/findAllUsers")
                    .then(res=>{
                        this.users=res.data
                    })
            },
            loadAllRoles(){
              axios.get("/roles")
                  .then(res=>{
                      this.roles = res.data
                  })
            },
            cancel(){
                this.dialogRoleFormVisible = false;
            },
            SaveUser(){
                let user = JSON.parse(JSON.stringify(this.user));
                if (user.id !==0){
                    axios.put("/user",user)
                        .then(res=>{
                            if (res.data==="ok"){
                                this.dialogFormVisible = false;
                                this.$message("修改用户成功！");
                                this.loadAllUsers();
                            }
                        })

                }else{
                    axios.post("/user",user)
                        .then(res=>{
                            if (res.data==="ok"){
                                this.dialogFormVisible = false;
                                this.$message("添加用户成功！");
                                this.loadAllUsers();
                            }
                        })

                }
            },
            handleEdit(index, row){
                this.user = JSON.parse(JSON.stringify(row));
                this.user.password = null;
                this.dialogFormVisible = true;
            },
            handleDelete(index,row){
                axios.delete("/user/"+row.id)
                    .then(res=>{
                        if (res.data==="ok"){
                            this.$message("删除用户成功！")
                            this.loadAllUsers();
                        }
                    })

            },
            closeDialog(){
                this.user={id:0};
            },
            checkUserRole(userRole,state){
                if (state.checkedNodes.includes(userRole)){
                    axios.post("/addUserRole",{userId:this.currentRole.id,roleId:userRole.id})
                        .then(res=>{
                            if(res.data==="ok"){
                                this.$message("添加角色成功")
                            }
                        })
                }else {
                    axios.delete("/deleteUserRole/"+this.currentRole.id+"/"+userRole.id)
                        .then(res=>{
                            if (res.data==="ok"){
                                this.$message("删除角色成功")
                            }
                        })
                }
            },
            toggleSelection(row) {
                //当前行成为选择角色
                this.currentRole =row;
                //清空所有选择
                this.$refs.multipleTable.clearSelection();
                //吧角色选中，选中变成取消
                this.$refs.multipleTable.toggleRowSelection(this.currentRole);
            },
            findById(){
                if(this.currentRole){
                    this.dialogRoleFormVisible = true;
                    axios.get("/role/"+this.currentRole.username)
                        .then(res=>{
                            this.$refs.tree.setCheckedNodes(res.data)
                        })
                }else{
                    this.$message("你必须选择一个角色!");
                }
            },



        },
        mounted(){
            this.loadAllUsers();
            this.loadAllRoles();
        },



    })
</script>
</html>